<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>选择城市</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/layer.css" />
    <link rel="stylesheet" type="text/css" href="../css/mdw.css" />
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../script/swiper.min.js"></script>
    <script type="text/javascript" src="../script/mobile.js"></script>
    <script type="text/javascript" src="../script/layer.js"></script>
    <script type="text/javascript" src="../script/mdw.js"></script>
    <script type="text/javascript" src="../script/jumpPage.js"></script>

</head>
<body class="bg-eee">
    <header class="header">
        <div class="backPrevPage on" onclick="historyBack()"></div>
        <div class="pageTitle">选择城市</div>

    </header>
    <section class="choosePage HTML_BOX">

        <div class="bg-eee" style="border-bottom:.2rem solid #EEE ; "></div>
        <!-- <div class="gpsCity plr displayFlex">
            <div>不列跌国家</div>
            <div class="icon"><i></i>重新定位</div>
        </div> -->
        <div class="chooseTit plr displayFlex">当前城市列表</div>
        <div class="chooseBox">
            <ul class="chooseIndex"></ul>
            <ul class="cityList bg-fff">

            </ul>
        </div>
        <div class="bg-eee" style="border-bottom:.5rem solid #EEE ; "></div>
    </section>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">


    var param = {};
    apiready = function(){
        $api.fixStatusBar($api.dom('header'));
        api.setStatusBarStyle({
            color: '#fff',//设置APP状态栏背景色
            style: 'dark'
        });
        //var character = new Array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","X","Y","Z");
        ifCnAndEn();
        param = api.pageParam||{};
        ready();

    };

    function choose(id,name){
        if(param.province_id){
            api.sendEvent({
                name: 'choosecity',
                extra: {
                    id: id,
                    name: name,
                }
            });
            historyBack();
        }else{
            api.sendEvent({
                name: 'index',
                extra: {
                    id: id,
                    name: name,
                }
            });
            historyBack();
        }
        
    }


    function ready(){
        getAjax(Interface.city,param,function(res){
            var data = res.data;
            var keys = [];
            if(data!="" && data!=null){
                for(key in data){
                    keys.push(key);

                }
                $.each(keys,function(i,item){
                    var html ='<li onclick="onheightToTop(\''+item+'\')" class="displayFlex">'+item+'</li>';
                    $(".chooseIndex").append(html);
                })
                $(".chooseIndex li").click(function(){
                    console.log($(this).text());
                    event.stopPropagation();
                })

                //console.log(JSON.stringify(data));
                $.each(data,function(i,item){
                    var index = 0;
                    $.each(item,function(j,jtem){
                        var html = "";
                        if(jtem.title!="All Cities" ){
                            if(index==0){
                                html ='<li onclick="choose(\''+jtem.id+'\',\''+jtem.title+'\')" class="displayFlex" id="city_'+i+'">'+jtem.title+'</li>';
                            }else{
                                html ='<li onclick="choose(\''+jtem.id+'\',\''+jtem.title+'\')" class="displayFlex" >'+jtem.title+'</li>';
                            }
                            $(".cityList").append(html);
                            index++;
                        }else{
                            if(param.type){
                                if(index==0){
                                    html ='<li onclick="choose(\''+jtem.id+'\',\''+jtem.title+'\')" class="displayFlex" id="city_'+i+'">'+jtem.title+'</li>';
                                }else{
                                    html ='<li onclick="choose(\''+jtem.id+'\',\''+jtem.title+'\')" class="displayFlex" >'+jtem.title+'</li>';
                                }
                                $(".cityList").append(html);
                                index++;
                            }
                        }
                        
                        
                    })
                })
            }
        })
    }


// function heightToTop(ele){
//     //ele为指定跳转到该位置的DOM节点
//     var bridge = $("#ele");
//     var root = document.body;
//     var height = 0;
//     do{
//         height += bridge.offsetTop;
//         bridge = bridge.offsetParent;
//     }while(bridge !== root)
 
//     return height;
// }

function onheightToTop(ele){
    var t = $('#city_'+ele).offset().top;
    $(window).scrollTop(t);
}
</script>
<script type="text/javascript">
    function ifCnAndEn(){
        var html = '';
        if(cnen==2){
          $(".pageTitle").html("Select City");
          // $(".icon").html("");
          $(".chooseTit").html("Current City");
        }

    }
</script>
</html>
